<template>
  <section class="content clearfix">
    <div class="col-sm-2">
      <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">仓库列表</h3>
        </div>
        <form class="form-horizontal">
          <div class="tree">
            <nav class='navbar'>
              <ul class='nav nav-stacked'>
                <template v-for='item in menus'>
                  <li role='presentation' v-if='!item.children'><a href="javascript:void(0);">{{item.text}}</a></li>
                  <li role='presentation' v-if='item.children'><a href="javascript:void(0);" v-on:click='toggleChildren(item)'>{{item.text}}<span class='glyphicon pull-right' v-bind:class='{ "glyphicon-chevron-right": !item.expanded, "glyphicon-chevron-down": item.expanded }'></span></a>
                    <ul v-show='item.expanded' class="childs">
                      <li v-for='child in item.children'><a href="javascript:void(0);">{{child.text}}</a></li>
                    </ul>
                  </li>
                </template>
              </ul>
            </nav>
          </div>
        </form>
      </div>
    </div>
    <div class="col-sm-10">
      <!--数据展示-->
      <div class="box box-info">
        <div class="row">
          <div class="col-xs-12">
            <div class="box-header with-border">
              <h3 class="box-title">数据列表</h3>
              <button type="button" class="btn btn-success pull-right m-r-10" data-toggle="modal" data-target="#modal-default">添加货架</button>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example3" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>货架/库位名称</th>
                  <th>货架/库位编号</th>
                  <th>商品数量</th>
                  <th>状态</th>
                  <!--<th>销量（7/30）</th>-->
                  <!--<th>状态</th>-->
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>A区</td>
                  <td>A001</td>
                  <td>60</td>
                  <td>-</td>
                  <td>
                    <a href="javascript:;" class="text-info m-lr-10" data-toggle="modal" data-target="#modal-default3">添加库位</a>
                    <a href="javascript:;" class="text-green m-lr-10">编辑</a>
                    <a href="javascript:;" class="text-green m-lr-10">删除</a>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
            <!-- /.box -->
          </div>
          <!-- /.col -->
        </div>
      </div>
      <!--数据展示end-->
    </div>

    <div class="modal fade" id="modal-default">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">添加货架</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="box-body">
                <div class="form-group">
                  <label for="" class="control-label col-sm-2">所属仓库：</label>
                  <div class="col-sm-10">
                    <label for="" class="control-label">仓库一</label>
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="control-label col-sm-2">货架编号：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="请输入货架编号">
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="control-label col-sm-2">货架名称：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="请输入货架名称">
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-default3">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">添加货架</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="box-body">
                <div class="form-group">
                  <label for="" class="control-label col-sm-2">所属仓库：</label>
                  <div class="col-sm-10">
                    <label for="" class="control-label">仓库一</label>
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="control-label col-sm-2">所属货架：</label>
                  <div class="col-sm-10">
                    <label for="" class="control-label">A区(A001)</label>
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="control-label col-sm-2">库位编号：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="请输入库位编号">
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="control-label col-sm-2">库位名称：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="请输入库位名称">
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
  </section>
</template>

<script>
    export default {
        name: "shelfManagement",
      methods: {
        toggleChildren: function(item) {
          item.expanded = !item.expanded;
        },
      },
      data() {
        return {
          id:"",
          menus:[{
            text:'水果',
            expanded:false,
            children:[{
              text:'苹果',
            },{
              text:'荔枝'
            },{
              text:'葡萄'
            },{
              text:'火龙果'
            }]
          },{
            text:'好吃的',
            expanded:false,
            children:[{
              text:'糖',
            },{
              text:'面包'
            },{
              text:'火腿'
            },{
              text:'薯片'
            },{
              text:'碎碎面'
            }]
          },{
            text:'饮料',
            expanded:false,
            children:[]
          }]
        }
      },
      methods:{

      },
      created(){

      }
    }
</script>

<style scoped>

</style>
